<template>
  <div class="wrap">
    <img :src="$imgUrl+resShopInfo.backgroundImg" alt="" class="shopBg" @click="look($imgUrl+resShopInfo.backgroundImg)" />
    <div class="rightIconWrap">
      <router-link :to="{ name: 'searchGoods' }">
        <img src="@/assets/search.png" alt="" class="search" />
      </router-link>
        <img src="@/assets/jubao.png" alt="" class="jubao" @click="jumpReportkinds"/>
    </div>
    <div class="productList">
      <div class="productionItem">
        <div class="proIntroWrap">
          <div class="proIntroLeft">
            <img :src="$imgUrl + resShopInfo.headImg" alt="" @click="look($imgUrl + resShopInfo.headImg)" class="proPoster" />
            <!-- <img src="@/assets/vip.png" alt="" class="vipImg" /> -->
          </div>
          <div class="proIntroRight">
            <div class="proTitle">
              <div class="proLeft">{{ resShopInfo.shopName }}</div>
              <div class="proRight">{{ resShopInfo.shopDetailsAddress }}</div>
            </div>
            <div class="workTime">
              <div class="timeLeft">
                营业：{{ resShopInfo.startBusinessTime }}-{{
                  resShopInfo.endBusinessTime
                }}
              </div>
              <div class="saleRight">销量:{{ resShopInfo.totalSaleNum }}</div>
            </div>
            <div class="salePrice" v-if="resShopInfo.appCouponList.length > 0">
              <em v-for="(item_, index_) in resShopInfo.appCouponList" :key="index_"
                >满{{ item_.thresholdPrice }}减{{ item_.discountsPrice }}&nbsp;&nbsp;</em
              >
              <!-- <i
                v-for="(item_, index_) in resShopInfo.appCouponList"
                :key="index_"
                v-if="index_ % 2 == 0"
              ></i> -->
            </div>
            <div class="salePrice" v-else>暂无优惠</div>
          </div>
        </div>
        <div class="proIntro">
          {{ resShopInfo.intro || "暂无简介" }}
        </div>
      </div>
      <div class="contactList">
        <div class="contactItem">
          <img src="@/assets/qq.png" alt="" />
          <em>{{ resShopInfo.qqNum || "暂无" }}</em>
        </div>
        <div class="contactItem">
          <img src="@/assets/weichat.png" alt="" />
          <em>{{ resShopInfo.wxNum || "暂无" }}</em>
        </div>
        <div class="contactItem">
          <img src="@/assets/phone.png" alt="" />
          <em>{{ resShopInfo.mobile || "暂无" }}</em>
        </div>
      </div>
      <div class="greyLine"></div>
      <div class="titleWarp">
        <div
          class="titleItem"
          :class="{ titleItemActiv: -1 == idGoodsKinds }"
          @click="chooseGoodsKinds(-1)"
        >
          全部商品
        </div>
        <div
          class="titleItem"
           v-for="(item, index) in resGoodsKindsList" :key="index"
          :class="{ titleItemActiv: item.id == idGoodsKinds }"
          @click="chooseGoodsKinds(item.id)"
          
        >
          {{ item.title }}
        </div>
      </div>
      <div class="filterWrap">
        <div class="filterItem" @click="orderBy(1)">
          价格
          <img src="@/assets/paixu.png" alt="" />
        </div>
        <div class="filterItem filterItemLine"></div>
        <div class="filterItem" @click="orderBy(2)">
          销量
          <img src="@/assets/paixu.png" alt="" />
        </div>
      </div>
      <div class="productListWrap">
        <div class="productItem" v-for="(item, index) in resGoodsList" :key="index">
          <img :src="$imgUrl + item.listImgUrl" alt="" class="proPosterLeft"  @click="jumpGoodsInfo(item)"/>
          <div class="proIntroRight2">
            <p class="proTitle2"  @click="jumpGoodsInfo(item)">{{ item.goodsName }}</p>
            <p class="saleNum2"  @click="jumpGoodsInfo(item)">已售{{ item.saleNum }}</p>
            <div class="priceWrap2">
              <em class="price2" @click="jumpGoodsInfo(item)">￥{{ item.price }}</em>
              <em class="addShoppingCar2" @click="showAddCarMask(item.id)">加入购物车</em>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 100px; width: 100%"></div>
    </div>
    <div class="shopCarBottom">
      <div class="shoppingCar">
        <img
          src="@/assets/shoppingCar.png"
          alt=""
          class="shoppingCarImg"
          @click="showCar = true"
        />
        <em class="shoppingCarNum">{{ carCountData.totalCount }}</em>
      </div>
      <div class="numWrap">
        <div class="carTotalNum">￥{{ carCountData.totalPrice }}</div>
        <div class="totalNum">
          共{{ carCountData.totalCount }}件&nbsp;&nbsp;&nbsp;&nbsp;需{{
            resShopInfo.startPrice
          }}元起送
        </div>
      </div>
      <div type="" class="goCount" @click="goCountJump">去结算</div>
    </div>
    <!-- 遮罩层-加入购物车： -->
    <div class="maskWrap" v-if="show">
      <div class="maskBg" @click="show = flase"></div>
      <div class="chooseNumWrap">
        <div class="productItem productItem2">
          <img
            :src="$imgUrl + specsChooseData.imageUrl"
            alt=""
            class="proPosterLeft proPosterLeft2"
          />
          <div class="proIntroRight3">
            <em class="price2 price3">￥{{ specsChooseData.price }}</em>
            <p class="pleaseChoosekinds">请选择规格</p>
          </div>
        </div>
        <div class="kindsWrap">
          <div class="kindsTitle">规格分类</div>
          <div class="kindsList">
            <div
              class="kindsItem"
              :class="{ kindsItemActive: specsId == item.id }"
              v-for="(item, index) in resGoodsInfo.goodsSpecsList"
              :key="index"
              @click="chooseSpecsItem(item)"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="kindsTitle">购买数量</div>
          <div class="kindsList">
            <van-stepper
              v-model="addCarNum"
              theme="round"
              button-size="18"
              disable-input
              min="0"
              @change="onChange(item)"
            />
          </div>
          <div class="sureAdd" @click="getAddCartGoods">确认</div>
        </div>
      </div>
    </div>
    <!-- 遮罩层-打开购物车： -->
    <div class="maskWrap" v-if="showCar">
      <div class="maskBg" @click="showCar = flase"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">
          <div class="maskTitleleft">{{ resShopInfo.shopName }}</div>
          <div class="maskTitleRight" @click="clearShopCarAll()">清空</div>
        </div>
        <div class="productListWrap">
          <div v-if="resCarGoodsList.length > 0">
            <div
              class="productItem"
              v-for="(item, index) in resCarGoodsList"
              :key="index"
            >
              <img :src="$imgUrl+item.listImgUrl" alt="" class="proPosterLeft" />
              <div class="proIntroRight2">
                <p class="proTitle2">{{ item.goodsName }}</p>
                <p class="saleNum2">{{ item.specsName }}</p>
                <div class="priceWrap2">
                  <em class="price2">￥{{ item.totalPrice }}</em>
                  <van-stepper
                    v-model="item.payNum"
                    theme="round"
                    button-size="18"
                    disable-input
                    min="0"
                    @change="onChange(item)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div style="font-size: 14px; color: #666" v-else>购物车是空的，赶紧加购吧~</div>
        </div>
        <div style="height: 70px; width: 100%"></div>
        <div class="shopCarBottom">
          <div class="shoppingCar">
            <img src="@/assets/shoppingCar.png" alt="" class="shoppingCarImg" />
            <em class="shoppingCarNum">{{ carCountData.totalCount }}</em>
          </div>
          <div class="numWrap">
            <div class="carTotalNum">￥{{ carCountData.totalPrice }}</div>
            <div class="totalNum">
              共{{ carCountData.totalCount }}件&nbsp;&nbsp;&nbsp;&nbsp;需{{
                resShopInfo.startPrice
              }}元起送
            </div>
          </div>
          <div type="" class="goCount" @click="goCountJump">去结算</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Overlay, Stepper,ImagePreview } from "vant";
import {
  apiGetGoodsTypeList,
  apiGetShopDetails,
  apiGetGoodsList,
  apiAddCartGoods,
  apiClearCartGoods,
  apiGetCartGoodsList,
  apiUpdateCartGoodsNum,
  apiGetGoodsDetails,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      value: "",
      showCar: false,
      show: false,
      reqShopId: this.$route.query.shopId, //店铺id
      resGoodsKindsList: [], //商品分类列表
      idGoodsKinds: -1, //选择的商品分类id,0为推荐，其余为真实分类id
      resShopInfo: "", //店铺详情信息
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resGoodsList: [],
      whichOrderWay: 1, //排序-价格1  排序-销量2
      isAsc: "desc", //排序-价格  排序-销量
      addCarNum: "1", //加入购物车选择的数量
      resGoodsInfo: "", //商品详情
      specsChooseData: "", //选择的规格数据
      specsId: "",
      resCarGoodsList: [], //购物车列表数据
      carCountData: {
        totalCount: 0, //总件数
        totalPrice: 0, //总价格
      },
    };
  },
  mounted() {
    console.log('fff',JSON.parse(sessionStorage.getItem("changeSchoolData")))
    window.addEventListener("scroll", this.handleScroll, true);
    this.getGoodsTypeList();
    this.getShopDetails();
    this.getGoodsList();
    this.getCartGoodsList();
  },
  methods: {
    // 查看图片
    look(img){
      ImagePreview([img]);
    },
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        console.log('触底')
        if (this.noMore) {
          return;
        }
        this.noMore = false;
        this.getGoodsList();
      }
    },
    //切换销量：
    orderBy(i) {
      this.whichOrderWay = i;
      this.isAsc = this.isAsc == "desc" ? "asc" : "desc";
      this.noMore = false
      this.reqPageNum = 0;
      this.resGoodsList = [];
      this.getGoodsList();
    },
    //获取店铺详情：
    getShopDetails() {
      apiGetShopDetails({
        id: this.reqShopId,
      }).then((res) => {
        console.log(res);
        this.resShopInfo = res.data;
        console.log('店铺详情',this.resShopInfo)
      });
    },
    //获取商品列表：
    getGoodsList() {
      var page = (this.reqPageNum += 1);
      console.log(this.reqShopId,this.idGoodsKinds,this.whichOrderWay,this.isAsc);
      apiGetGoodsList({
        shopId: this.reqShopId,  
        schoolId: JSON.parse(sessionStorage.getItem("changeSchoolData")).schoolId,
        typeId: this.idGoodsKinds == -1 ? -1 : this.idGoodsKinds,
        orderByColumn: this.whichOrderWay == 1 ? "price" : "saleNum",
        isAsc: this.isAsc,
        pageNum: page,
        pageSize: this.reqpageSize,
      }).then((res) => {
        console.log(res);
        if (res.data.rows.length === 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.resGoodsList.push(...dataRes);
        console.log("商品列表", this.resGoodsList);
      });
    },
    //获取商品详情（商品规格包含在里面）：
    getGoodsDetails(i) {
      apiGetGoodsDetails({
        id: i,
      }).then((res) => {
        this.resGoodsInfo = res.data;
        this.specsChooseData = res.data.goodsSpecsList[0];
        this.specsId = res.data.goodsSpecsList[0].id;
        console.log("商品详情", this.resGoodsInfo);
      });
    },
    //获取商店商品分类列表：
    getGoodsTypeList() {
      apiGetGoodsTypeList({
        id: this.reqShopId,
      }).then((res) => {
        this.resGoodsKindsList = res.data;
      });
    },
    //选择的商品分类id：
    chooseGoodsKinds(id) {
      this.noMore = false
      this.idGoodsKinds = id;
      this.reqPageNum = 0;
      this.resGoodsList = [];
      this.getGoodsList();
    },
    //添加商品到购物车打开选择规格mask
    showAddCarMask(i) {
      this.getGoodsDetails(i);
      this.show = true;
    },
    //添加商品到购物车-确认动作
    getAddCartGoods() {
      apiAddCartGoods({
        goodsId: this.resGoodsInfo.id,
        goodsName: this.resGoodsInfo.goodsName,
        payNum: this.addCarNum,
        shopId: this.resGoodsInfo.shopId,
        specsId: this.specsChooseData.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("加入成功!");
          this.show = false;
          this.getCartGoodsList(); //请求购物车数据
        }
      });
    },
    //选择规格
    chooseSpecsItem(data) {
      this.specsId = data.id
      this.specsChooseData = data;
    },
    //请求购物车列表：[]
    getCartGoodsList() {
      this.carCountData.totalCount = 0;
      this.carCountData.totalPrice = 0;
      apiGetCartGoodsList({
        id: this.reqShopId,
      }).then((res) => {
        this.resCarGoodsList = res.data;
        this.resCarGoodsList.map((item) => {
          this.carCountData.totalCount = this.carCountData.totalCount + item.payNum;
          this.carCountData.totalPrice = this.carCountData.totalPrice + item.totalPrice;
        });
        console.log("购物车数据", this.resCarGoodsList);
      });
    },
    //清空购物车：
    clearShopCarAll() {
      apiClearCartGoods({
        id: this.reqShopId,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("已清空成功!");
          this.showCar = false;
          this.getCartGoodsList(); //请求购物车数据
        }
      });
    },
    //修改购物车的数量：
    onChange(data) {
      console.log('data',data)
      apiUpdateCartGoodsNum({
        goodsId: data.goodsId,
        payNum: data.payNum,
        shopId: data.shopId,
        specsId: data.specsId,
      }).then((res) => {
         this.specsId = 1
        this.getCartGoodsList();
      });
    },
    goCountJump() {
      if(this.resCarGoodsList.length==0){
        this.$toast.fail('请选购商品')
        return
      }
      this.$router.push({
        path: "/pages/orderSure",
        query: {
          //传递参数
          shopId: this.reqShopId
        },
      });
    },
    //跳转商品详情：
    jumpGoodsInfo(data){
      this.$router.push({
        path: "/pages/goodsInfo",
        query: {
          GoodsId:data.id,
          shopId:this.reqShopId
        },
      });
    },
     //举报：
    jumpReportkinds() {
      let obj = {
          dataJump: this.resShopInfo,
          contentType: 2, //评论类型：1,帖子类型：0,店铺类型：2
      }
      this.$store.commit('reportPara',obj)
      this.$router.push({
        path: "/pages/reportkinds",
        query: obj,
      });
    },
  },
  created() {},
  components: {
    [Overlay.name]: Overlay,
    [Stepper.name]: Stepper,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>

<style scoped>
.wrap {
  position: relative;
}

.shopBg {
  width: 100%;
  /* max-height: 155px; */
  position: absolute;
  top: 0px;
  left: 0px;
}
.rightIconWrap {
  position: absolute;
  top: 17px;
  right: 5px;
  width: 70px;
  height: 29px;
  line-height: 29px;
  background: #ffffff;
  opacity: 0.6;
  border-radius: 15px;
  display: flex;
  align-items: center;
}
.search {
  width: 17px;
  display: inline-block;
  margin: 9px 11px 0px 14px;
}
.jubao {
  width: 15px;
  display: inline-block;
}
.productList {
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  top: 260px;
  left: 0px;
  background: #fafbfc;
  width: 100%;
}
.productionItem {
  width: calc(100% - 30px);
  min-height: 130px;
  padding: 15px;
}
.proTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.proLeft {
  font-size: 15px;
  font-weight: 500;
  color: #181818;
}
.proRight {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
  border-radius: 15px;
}
.vipImg {
  width: 30px;
  height: 15px;
  position: absolute;
  left: 80px;
}
.proIntroRight {
  width: 65%;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
  margin-top: 15px;
}
.salePrice {
  font-size: 9px;
  font-weight: 400;
  color: #ff5252;
  /* padding: 3px 8px; */
  border: 1px solid #ff5252;
  border-radius: 7px;
  /* width: 100px; */
  margin: 10px 0px 5px 0px;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
}
.contactList {
  width: calc(100% - 30px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.contactItem {
  height: 20px;
  line-height: 20px;
  display: flex;
}
.contactItem img {
  height: 20px;
  align-items: center;
  padding-right: 6px;
}
.contactItem em {
  font-size: 12px;
  font-weight: 500;
  color: #181818;
}
.greyLine {
  width: 100%;
  height: 6px;
  background-color: #f2f4fa;
  margin: 17px 0px;
}
.titleWarp {
  width: calc(100% - 30px);
  margin: 20px auto;
  height: 35px;
  line-height: 30px;
  overflow-y: hidden;
  overflow-x: scroll;
  display: -webkit-box;
}
.titleItem {
  font-size: 15px;
  font-weight: 500;
  color: #181818;
  margin-right: 30px;
  /* overflow: hidden; */
  /* float: left; */
}
.titleItemActiv {
  font-size: 21px;
  font-weight: 500;
  color: #181818;
  border-bottom: 4px solid #000;
}
.filterWrap {
  width: calc(100% - 46px);
  margin: 0 auto;
  height: 34px;
  line-height: 34px;
  background: #f6f7f9;
  border-radius: 17px;
  font-size: 12px;
  font-weight: 500;
  color: #666666;
  padding-left: 26px;
  margin-top: 10px;
}
.filterItem {
  float: left;
  margin-right: 15px;
}
.filterItem > img {
  width: 5px;
  height: 5px;
  padding-bottom: 2px;
}
.filterItemLine {
  height: 15px;
  width: 1px;
  background-color: #e5e5e5;
  margin-top: 10px;
}
.productListWrap {
  width: calc(100% - 30px);
  margin: 20px auto;
    min-height: 45vh;
}
.productItem {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.proPosterLeft {
  width: 24%;
  height: 75px;
}
.proIntroRight2 {
  width: 70%;
}
.proTitle2 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0px;
}
.saleNum2 {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  text-align: left;
  margin-bottom: 0px;
}
.priceWrap2 {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}
.price2 {
  font-size: 10px;
  font-weight: bold;
  color: #ff4646;
}
.addShoppingCar2 {
  padding: 5px 8px;
  height: 18px;
  line-height: 18px;
  background: #f48f5b;
  border-radius: 15px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
}
.shopCarBottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 69px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
}
.shoppingCar {
  float: left;
  position: relative;
  margin: 12px 20px;
}
.shoppingCarImg {
  width: 29px;
  height: auto;
  position: absolute;
}
.shoppingCarNum {
  display: inline-block;
  /* width: 14px;
  height: 14px;
  line-height: 14px; */
  background: #ff4646;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 25px;
  text-align: center;
  padding: 3px 5px;
}
.numWrap {
  float: left;
  margin-left: 36px;
}
.carTotalNum {
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  color: #ff4646;
  margin: 10px 0px 5px 0px;
}
.totalNum {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 300;
  color: #999999;
}
.goCount {
  float: right;
  margin: 8px 15px 0px 0px;
  width: 95px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  height: 120px;
  background-color: #fff;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
}
.chooseNumWrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.maskTitle {
  height: 50px;
  line-height: 50px;
}
.maskTitleleft {
  float: left;
  font-size: 14px;
  color: #000;
  margin-left: 40%;
}
.maskTitleRight {
  float: right;
  color: #666;
  margin-right: 15px;
}
.productItem2 {
  margin-bottom: 0px;
}
.proPosterLeft2 {
  width: 18%;
  /* height: auto; */
  height: 73px;
  padding: 15px;
}
.proIntroRight3 {
  width: 70%;
  text-align: left;
  margin-top: 15px;
}
.price3 {
  font-size: 18px;
  margin-left: 0px;
}
.pleaseChoosekinds {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}
.kindsWrap {
  text-align: left;
  width: calc(100% - 30px);
  margin: 0 auto;
}
.kindsTitle {
  border-top: 1px solid rgb(212, 210, 210);
  font-size: 14px;
  padding-top: 10px;
  margin-bottom: 10px;
}
.kindsList {
  /* display: flex; */
  /* justify-content: space-between; */
  margin-bottom: 20px;
  overflow: hidden;
}
.kindsItem {
  background-color: #999999;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  float: left;
  margin-right: 10px;
  margin-bottom: 8px;
}
.kindsItemActive {
  background-color: #000;
}
.sureAdd {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  margin: 25px 0px;
}
/deep/.van-stepper--round .van-stepper__plus {
  background-color: #f48f5b;
}
/deep/.van-stepper--round .van-stepper__minus {
  border-color: #f48f5b;
  color: #f48f5b;
  background-color: #fff;
}
</style>
